<template>
	<view class="ayi-page">
		<view class="bg-c"><image class="bg-img" mode="aspectFill" src="../../../static/img/bg.png"></image></view>
		<view class="login-form">
			<view class="login-back" @click="onLogin()"><i class="iconfont">&#xe63d;</i></view>
			<view class="login-icon"><image style="width: 80px; height: 140px;" mode="aspectFit" src="../../../static/img/login_icon.png"></image></view>
			<view class="login-f-control">
				<i class="iconfont">&#xe671;</i>
				<input class="l-input username" v-model="username" placeholder="用户名" />
				<view class="code-span" @click="getCode()">
					邮箱验证码
					<text v-if="gap != 0">{{ gap }}s</text>
				</view>
			</view>
			<view class="login-f-control">
				<i class="iconfont">&#xe6ad;</i>
				<input class="l-input" v-model="imgcode" type="text" placeholder="邮箱验证码" />
			</view>
			<view class="login-f-control">
				<i class="iconfont">&#xe6ad;</i>
				<input class="l-input" v-model="password" type="password" placeholder="新密码" />
			</view>
			<view class="login-btn-control"><button type="primary" @click="onSubmit()" class="l-btn-c">确定</button></view>
			<view class="login-btn-a-control">
				<text class="a-btn" @click="onLogin()">登录</text>
				<text class="a-btn" @click="registPage()">注册</text>
			</view>
		</view>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
export default {
	data() {
		return {
			username: '',
			imgcode: '',
			password: '',
			gap: 0, //再次点击邮箱按钮的倒计时操作
			timer01: ''
		};
	},
	onLoad() {},
	methods: {
		/**
		 * 跳到登录的页面
		 */
		onLogin() {
			this.goBackPage();
		},
		/**
		 * 跳转到注册页面
		 */
		registPage() {
			if (Config.isAgent == 1) {
				this.navigateToSigleUrl('/pages/my/registagent/registagent');
			} else {
				this.navigateToSigleUrl('/pages/my/regist/regist');
			}
		},
		/**
		 * 确认去登录
		 */
		onSubmit() {
			let that = this;
			let obj = '{"username":"' + this.username + '","type":"login","code":"' + this.imgcode + '","password":"' + this.password + '"}';
			if (Tools.isEmpty(this.username)) {
				VueTools.toastNo('请输入用户名');
				return;
			}
			if (Tools.isEmpty(this.imgcode)) {
				VueTools.toastNo('请输入邮箱验证码');
				return;
			}
			if (Tools.isEmpty(this.password)) {
				VueTools.toastNo('请输入新密码');
				return;
			}
			Net.ayiHttp(
				URL.LOGIN_MODIFYPWD,
				obj,
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						VueTools.toastNo(res.message);
						let timeOut=setTimeout(function(){
							that.onLogin();
							clearTimeout(timeOut);
						},1000);
						
					} else {
						VueTools.toastNo(res.message);
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		getCode() {
			let that = this;
			if (that.gap != 0) {
				return;
			}
			if (Tools.isEmpty(this.username)) {
				VueTools.toastNo('请输入用户名');
				return;
			}
			let obj = '{"username":"' + this.username + '","type":"login"}';
			Net.ayiHttp(
				URL.LOGIN_FINDPWD,
				obj,
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let tempRes = Tools.aesDecodeToJson(res.data);
						console.log('获取邮箱验证码的数据:==============', tempRes);
						VueTools.toastNo(res.message);
						that.gap = tempRes.gap;
						clearInterval(that.timer01);
						that.count(that.gap);
					} else {
						VueTools.toastNo(res.message);
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		count(val) {
			let that = this;
			this.timer01 = setInterval(function() {
				val--;
				if (val <= 0) {
					clearInterval(that.timer01);
				}
				that.gap = val;
			}, 1000);
		}
	},
	onUnload() {
		clearInterval(this.timer01);
	}
};
</script>

<style lang="scss">
.bg-c {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: -1;
	.bg-img {
		width: 100%;
		height: 100%;
	}
}
.login-form {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	.login-back {
		text-align: left;
		color: #fff;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 20rpx;
	}
	.login-icon {
		margin-bottom: 20px;
	}
	.login-f-control {
		margin-bottom: 10px;
		height: 40px;
		display: flex;
		align-items: center;
		position: relative;
		i.iconfont {
			font-size: 24px;
			color: #fff;
			margin-right: 10px;
		}
		.l-input {
			height: 40px;
			width: 600rpx;
			color: #ffffff;
			border-bottom: 1px solid #ffffff;
			display: inline-block;
			&.username {
				width: 430rpx;
				padding-right: 170rpx;
			}
		}
		.uni-input-input {
			background: red;
		}
		.code-span {
			position: absolute;
			bottom: 20rpx;
			right: 0px;
			z-index: 100;
			display: inline-block;
			color: #f24439;
			font-size: 34rpx;
		}
	}
	.login-btn-control {
		width: 680rpx;
		margin-top: 20px;
		.l-btn-c {
			background: $wlh-color-defealt;
			margin-bottom: 10px;
		}
	}
	.login-btn-a-control {
		width: 680rpx;
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		.a-btn {
			color: #fff;
		}
	}
}
</style>
